import React, { Component } from 'react'
// 事件的定义
// 方式一： 直接在render函数内写 行内的箭头函数 --- jsx代码中写行内箭头函数
export default class App extends Component {
  state = {
    count: 10
  }
  render() {
    return (
      <div>
        <button onClick ={ (e) => {
          // 修改状态
          // this.setState({
          //   count: this.state.count + 10
          // })
          // this.setState((prevState) => {
          //   return {
          //     count: prevState.count + 20
          //   }
          // })
          // 箭头函数可以自带返回值，如果返回值是一个对象，使用 () 包裹
          // this.setState((prevState) => ({
          //   count: prevState.count + 30
          // }))
          // 可以使用解构复制精简代码 --- 参数的解构赋值（需要使用()包裹）
          this.setState(({ count }) => ({ count: count + 40}))
        } }>加</button>{ this.state.count }
      </div>
    )
  }
}
